<template>
	<view>
		<nav_bar title='我的详情'/>
		<view style="height: 55px;"/>
		<!-- 头像区 -->
		<view class="myDetail">
			
			<view class="">
				<image
					:src="userInfo.pic?userInfo.pic:'https://img1.baidu.com/it/u=4017730767,3985396437&fm=253&fmt=auto&app=138&f=JPG?w=200&h=200'"
					mode="" class="myImg"></image>
				<view class="myUpload" @click="handleSetImg">更换头像<u-upload class="load" :fileList="fileList"
						@afterRead="afterRead" name="1" multiple :maxCount="10"></u-upload></view>
			</view>
			<view class="myText">
				<view class="">
					昵称：{{userInfo.realname}}
				</view>
				<view class="">
					电话：{{userInfo.phone}}
				</view>
				<view class="">
					邮箱：{{userInfo.email}}
				</view>
			</view>
		</view>
		<!-- 添加会员 -->
		<view class="" style="margin-top: 3rem;">
			<u-button v-if="!userInfo.id" text="添加会员" color="#02A774" @click="handleAddUser"></u-button>
			<u-button v-else text="编辑会员" color="#26A2FF" @click="handleEdit"></u-button>
			<!-- 弹出框 -->
			<u-modal :show="show" title="添加会员" @confirm="handleOk">
				<p style="display: flex;">昵称：<u--input v-model="name" placeholder="请输入昵称" border="surround" /></p>

				<p style="display: flex;">电话：<u--input v-model="phone" placeholder=" 请输入电话" border="surround" />
				</p>
				<p style="display: flex;">邮箱：<u--input v-model="email" placeholder=" 请输入邮箱" border="surround" />
				</p>
			</u-modal>
		</view>
		<view class="" style="margin-top: 3rem;">
			<u-button text="退出登录" color="red" @click="handleExit"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		data() {
			return {
				show: false,
				name: '', //昵称
				phone: '', //手机号
				email: '', //邮箱，
				userInfo: {}, //回显数据
				fileList: [],

			}
		},
		onLoad() {
			this.getUserInfo()
		},
		onShow() {
			this.getUserInfo()
		},
		computed: {
			...mapState(['username']),
		},
		methods: {
			// 添加会员
			handleAddUser() {
				this.show = true
			},
			// 退出登录
			handleExit() {
				uni.request({
					url: 'http://localhost:8002/admin/vuelogout',
					method: 'GET',
					success: (res) => {
						if (res.data.msg === 0) {
							uni.showLoading({
								title: '退出成功',
								icon: 'success',
							})
							setTimeout(() => {
								uni.hideLoading();
								uni.navigateTo({
									url: '/pages/register/register'
								})
							}, 2000)
						}
					}
				})


			},
			// 添加完成后回显数据
			async getUserInfo() {
				uni.request({
					url: 'http://localhost:8002/admin/usermessage',
					method: 'GET',
					data: {
						name: this.username
					},
					success: (res) => {
						console.log(res);
						if (res.data.id) {
							this.userInfo = res.data
						}
					}
				})

			},
			// 确定添加或编辑
			handleOk() {
				if (!this.userInfo.id) {
					console.log('添加',this.username);
					uni.request({
						url: 'http://localhost:8002/admin/insertuserinfo',
						method: 'POST',
						data: {
							username: this.name,
							phone: this.phone,
							email: this.email,
							userinfo_name: this.username
						},
						success: (res) => {
							if (res.data.id) {
								uni.showLoading({
									icon: 'success',
									title: '添加成功'
								})
								this.getUserInfo()
								setTimeout(function() {
									uni.hideLoading();
								}, 2000);
							}
						}
					})

				} else {
					console.log('编辑');
					uni.request({
						url: 'http://localhost:8002/admin/updateuserinfo',
						method: 'POST',
						data: {
							username: this.name,
							phone: this.phone,
							email: this.email,
							userinfo_name: this.username
						},
						success: (res) => {
							if (res.data.msg === 'ok') {
								uni.showLoading({
									icon: 'success',
									title: '编辑成功'
								})
								this.getUserInfo()
								setTimeout(function() {
									uni.hideLoading();
								}, 2000);
							}

						}
					})

				}
				this.show = false
			},
			// 编辑会员
			handleEdit() {
				this.show = true
				this.name = this.userInfo.realname
				this.phone = this.userInfo.phone
				this.email = this.userInfo.email
			},
			// 更换头像
			handleSetImg(e) {

			},
			afterRead(e) {
				console.log(e.file[0].url);
				uni.request({
					url: 'http://localhost:8002/admin/updateuserpic',
					method: 'POST',
					data: {
						headerpic: e.file[0].url,
						userinfo_name: this.username
					},
					success: (res) => {
						this.getUserInfo()
					}
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.myDetail {
		width: 100%;
		height: 40%;
		padding: 1rem 1rem;
		display: flex;

		.myImg {
			width: 7rem;
			height: 7rem;
			border-radius: 50%;
		}

		.myText {
			line-height: 2.5rem;
			font-size: 1rem;
			padding-left: 1rem;
		}
	}

	.myUpload {
		width: 4rem;
		height: 2rem;
		border: 1px solid #ccc;
		line-height: 2rem;
		text-align: center;
		margin-left: 1.5rem;
		position: relative;

		.load {
			opacity: 0;
			position: absolute;
			top: -50%;
		}
	}

	/deep/ .u-modal__content {
		line-height: 2rem;
		flex-direction: column !important;
	}
</style>